<template>
  <view>
    <!-- <uni-swipe-action-item v-for="(v, i) in carList" :key="i" :right-options="options" @click="handleDelete(v)"> -->
    <list-item :v="v" v-for="(v, i) in carList" :key="i">
      <!-- slot: pre-left -->
      <radio :checked="v.goods_state" slot="pre-left" @click="switchStateCarList(v)" />
      <!-- slot: count -->
      <uni-number-box :min="1" :value="v.goods_count" slot="count" @change="handleChange($event, v.goods_id)" />
    </list-item>
    <!-- </uni-swipe-action-item> -->
    <view class="submit-bar-placeholder">
      <view class="submit-bar">
        <view class="left">
          <radio :checked="allState" @click="switchAllStateCarList(!allState)" />
          <text>￥：{{ totalPrice.toFixed(2) }}</text>
        </view>
        <view class="right">
          <button>立即购买</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import mixin from '../../mixins/index.js'
  import {
    mapState,
    mapMutations,
    mapGetters
  } from 'vuex'
  export default {
    mixins: [mixin],
    data() {
      return {
        options: [{
          text: '确认',
          style: {
            backgroundColor: '#dd524d'
          }
        }]
      }
    },
    computed: {
      ...mapState('car', ['carList']),
      ...mapGetters('car', ['allState', 'totalPrice'])
    },
    methods: {
      ...mapMutations('car', ['changeCountCarList', 'deleteCarList', 'switchStateCarList', 'switchAllStateCarList']),
      change() {},
      handleDelete(v) {
        uni.showModal({
          title: '警告',
          content: '确认要删除该项数据吗?',
          success: ({
            confirm
          }) => {
            if (confirm) {
              this.deleteCarList(v)
            }
          }
        })
      },
      handleChange(value, id) {
        const goods = {
          goods_id: id,
          goods_count: value
        }
        console.log(goods)
        this.changeCountCarList(goods)
      }
    }
  }
</script>

<style lang="scss">
  .delete {
    background-color: red;
    color: white;
    width: 100upx;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .submit-bar-placeholder {
    height: 120upx;
  }

  .submit-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    /*#ifdef H5*/
    bottom: 100upx;
    /*#endif*/

    /*#ifdef MP*/
    bottom: 0;
    /*#endif*/

    left: 0;
    width: 100%;
    background-color: white;
    height: 120upx;
    z-index: 999;

    .left {
      color: red;
      display: flex;
      align-items: center;
    }

    .right {
      display: flex;
      align-items: center;

    }
  }
</style>
